<template>
  <view class="back_bg">
    <!--    头部-->
    <view class="white__bg">
      <view class="header">
        <view class="header__left">
          <image class="shop__avatar" :src="shopUserData.pic"></image>
          <view class="header__center">
            <view class="header__shop-info">
              <view class="shop__name">{{shopUserData.name}}</view>
              <view class="shop__tabs">{{shopUserData.isProxy == 0 ? '商家' : '代理商'}}</view>
            </view>
            <text class="shop__phone">{{shopUserData.phone}}</text>
          </view>
        </view>

        <navigator url="/pages/shop/info" class="header__right">
          <u-icon name="play-right-fill" size="35"></u-icon>
        </navigator>
      </view>
      <!--    商户数据-->

      <view class="shopUserData u-skeleton ">
        <view class="u-skeleton-rect">
          <view class="shopUserData__count ">{{shopData.couponCount}}
            <text>张</text>
          </view>
          <text class="shopUserData__count-name ">优惠券</text>
        </view>
        <view class="u-skeleton-rect">
          <view class="shopUserData__count ">{{shopData.videoCount}}
            <text>次</text>
          </view>
          <text class="shopUserData__count-name">余额</text>
        </view>
        <view class="u-skeleton-rect">
          <view class="shopUserData__count ">{{shopData.checkCount}}
            <text>次</text>
          </view>
          <text class="shopUserData__count-name">核销次数</text>
        </view>
      </view>


      <!--    充值-->
      <view class="recharge">
        <view class="recharge__main">
          <view class="recharge__left">
            <view class="recharge__left-title">
              <text>拓流者</text>
              <image
                  src="https://source.qingyunclouds.com/resource/20211009/20ee2a2872aa430abc33eac5034d8586.png"></image>
            </view>
            <text>充值套餐服务</text>
          </view>
          <view class="recharge__right">
            <navigator url="/pages/combo/index">
              <image src="https://source.qingyunclouds.com/bug_icon.png"></image>

            </navigator>
          </view>
        </view>
      </view>
    </view>


    <u-gap height="80" bg-color="#F8F9F9"></u-gap>
    <!--    操作列表-->
    <view class="white__bg">
      <view class="page">

        <navigator url="/pages/shop/info" class="pageList">
          <view>
            <view class="img_box">
              <image class="pageList-img shop_icon" src="https://source.qingyunclouds.com/shop_icon.png"></image>
            </view>
            <text class="pageList-txt">商家信息</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <navigator url="/pages/bankCard/list" class="pageList" v-if="shopUserData.isProxy == 1">
          <view>
            <view class="img_box">
              <image class="pageList-img apply_icon" src="https://source.qingyunclouds.com/bankCard1.png"></image>
            </view>
            <text class="pageList-txt">银行卡</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <navigator url="/pages/withdraw/index" class="pageList" v-if="shopUserData.isProxy == 1">
          <view>
            <view class="img_box">
              <image class="pageList-img apply_icon" src="https://source.qingyunclouds.com/withdraw1.png"></image>
            </view>
            <text class="pageList-txt">提现</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <navigator url="/pages/distribution/index" class="pageList" v-if="shopUserData.isProxy == 1">
          <view>
            <view class="img_box">
              <image class="pageList-img distribution_icon"
                     src="https://source.qingyunclouds.com/distribution.png"></image>
            </view>
            <text class="pageList-txt">分销记录</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <navigator url="/pages/pushRecord/index" class="pageList" >
          <view>
            <view class="img_box">
              <image class="pageList-img distribution_icon"
                     src="https://source.qingyunclouds.com/Promote1.png"></image>
            </view>
            <text class="pageList-txt">推广记录</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <navigator url="/pages/order/index" class="pageList">
          <view>
            <view class="img_box">
              <image class="pageList-img order_icon" src="https://source.qingyunclouds.com/order_icon.png"></image>
            </view>
            <text class="pageList-txt">订单列表</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>

        <navigator url="/pages/activity/index" class="pageList">
          <view>
            <view class="img_box">
              <image class="pageList-img activity_icon"
                     src="https://source.qingyunclouds.com/activity_icon3.png"></image>
            </view>
            <text class="pageList-txt">活动列表</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <view class="pageList" @click="getShopCode">
          <view>
            <view class="img_box">
              <image class="pageList-img shop_icon" src="https://source.qingyunclouds.com/code_icon.png"></image>
            </view>
            <text class="pageList-txt">商家授权码</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <navigator url="/pages/feedback/index" class="pageList">
          <view>
            <view class="img_box">
              <image class="pageList-img opinion_icon" src="https://source.qingyunclouds.com/opinion_icon.png"></image>
            </view>
            <text class="pageList-txt">意见反馈</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
        <navigator url="/pages/apply/index" class="pageList" v-if="shopUserData.isProxy == 0 && applyStatus">
          <view>
            <view class="img_box">
              <image class="pageList-img apply_icon" src="https://source.qingyunclouds.com/apply_icon.png"></image>
            </view>
            <text class="pageList-txt">申请代理商</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </navigator>
      </view>
    </view>
    <u-gap height="40" bg-color="#F8F9F9"></u-gap>
    <view class="quit__btn" @click="showModel = true">退出登陆</view>
    <!--    授权二维码-->
    <u-popup v-model="showCode" :closeable="true" mode="center" border-radius="10">
      <view class="shop__code">
        <!--        <canvas id="qrcode" canvas-id="qrcode" />-->
        <image class="codeImg" :src="qrcodeSrc"></image>
        <text class="illustrate">请打开抖音APP进行扫码</text>
        <u-button :custom-style="btnStyle" @click="saveCode">下载二维码</u-button>
      </view>
    </u-popup>
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
    <u-modal v-model="showModel" :show-cancel-button="true" content="是否退出账号" @confirm="quit"></u-modal>
    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>

  </view>
</template>
<script>
import {shopInfo, getShopCouponData, getAuthQrCodeUrl, checkApplyProxy} from "../../api/shop";
import uQRCode from '../../uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode'
import {base64ToPath} from "../../js_sdk/mmmm-image-tools";

export default {
  data() {
    return {
      //商家用户信息
      shopUserData: {},
      //商户数据
      shopData: {},
      //打开二维码弹窗
      showCode: false,
      btnStyle: {
        marginTop: '40rpx',
        background: '#D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);',
        color: "#fff",
        border: "none"
      },
      //二维码图片
      qrcodeSrc: "",
      //是否现实骨架屏
      loading: true,
      //是否退出账号
      showModel: false,
      //申请成为代理商状态
      applyStatus: false
    }
  },
  onLoad() {

  },
  onShow() {
    this.getInfo();
    this.getShopInfo();
    this.getApplyStatus()

  },
  onReady() {

  },
  methods: {
    //获取用户信息
    getInfo() {
      shopInfo().then(res => {
        uni.setStorage({
          key: 'userInfo',
          data: res.data
        });
        this.shopUserData = res.data;
      })
    },
    //获取商户数据
    getShopInfo() {
      this.$refs.loading.open()
      getShopCouponData().then(res => {
        this.$refs.loading.close()
        this.shopData = res.data;
        this.loading = false;
      }).catch(err => {
        this.$refs.loading.close()
      })
    },
    //商户授权二维码
    async getShopCode() {
      const _this = this;
      uni.showLoading({
        mask: true,
        title: '生成中...'
      })
      let res = await getAuthQrCodeUrl().then();
      if (res.code == 200) {
        let img = 'data:image/jpg;base64,' + res.msg;
        base64ToPath(img).then(path => {
          this.qrcodeSrc = path;
        }).catch(error => {
          console.error(error)
        })
        uni.hideLoading()
        this.showCode = true;
      }
    },
    //保存二维码
    saveCode() {
      const _this = this;
      uni.saveImageToPhotosAlbum({
        filePath: _this.qrcodeSrc,
        success: (res) => {
          uni.showToast({
            icon: 'success',
            title: '保存成功'
          })
        }
      })
    },
    //获取申请代理商状态
    getApplyStatus() {
      checkApplyProxy().then(res => {
        if (res.data == 0 || res.data == 1) {
          this.applyStatus = false
        } else {
          this.applyStatus = true

        }
      })
    },
    //退出登陆
    quit() {
      uni.reLaunch({
        url: '/pages/login/login'
      });
      uni.removeStorage({
        key: 'token'
      });
      uni.removeStorage({
        key: 'userInfo'
      });

    }
  },

}
</script>

<style lang="scss" scoped>
//头部
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  height: 200rpx;

  .header__left {
    display: flex;
    align-items: center;
    //头像
    .shop__avatar {
      display: block;
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      box-shadow: 0px 2px 4px 0px rgba(238, 238, 238, 0.5);
    }

    //头部中间部分
    .header__center {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 110rpx;
      margin-left: 30rpx;
      //头部商家信息
      .header__shop-info {
        display: flex;
        align-items: center;

        .shop__name {
          font-size: 40rpx;
          color: #2E3C4D;
          font-weight: bold;
        }

        .shop__tabs {
          font-size: 24rpx;
          min-width: 100rpx;
          height: 50rpx;
          line-height: 50rpx;
          color: #ffffff;
          margin-left: 50rpx;
          text-align: center;
          border-radius: 10rpx;
          background: linear-gradient(77deg, #F3DA9D 0%, #E4B364 100%);
        }
      }

      .shop__phone {
        color: #AEB3C0;
        font-size: 24rpx;
      }
    }
  }
}

//商户数据
.shopUserData {
  width: 90%;
  margin: 20rpx auto;
  display: flex;
  justify-content: space-between;
  height: 100rpx;

  > view {
    width: 33%;
  }

  .shopUserData__count {
    font-size: 36rpx;
    font-weight: bold;
    color: #2E3C4D;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    > text {
      font-size: 24rpx;
      margin-left: 5rpx;
      margin-top: 5rpx;
    }
  }

  .shopUserData__count-name {
    display: block;
    text-align: center;
  }
}

//充值
.recharge {
  width: 100%;
  height: 124rpx;
  background-image: url("https://source.qingyunclouds.com/resource/20211009/2ad6a39fba0440e5aa52b97b837bceca.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .recharge__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    height: 124rpx;
    margin: 0 auto;

    .recharge__left {
      display: flex;
      flex-flow: column;
      color: #ffffff;

      .recharge__left-title {
        display: flex;
        align-items: center;
        font-size: 32rpx;

        > image {
          width: 30rpx;
          height: 26rpx;
          margin-left: 20rpx;
        }
      }

      > text {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }

    .recharge__right {
      display: flex;
      align-items: center;
      height: 124rpx;

      image {
        width: 154rpx;
        height: 64rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.page {
  width: 90%;
  margin: 0 auto;

  .pageList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #F3F3F7;

    > view {
      display: flex;
      align-items: center;

      .img_box {
        width: 60rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        margin-right: 10rpx;
      }

      .pageList-img {
        width: 35rpx;
        height: 32rpx;
      }

      .shop_icon {
        width: 30rpx;
        height: 30rpx;
      }

      .order_icon {
        width: 30rpx;
        height: 36rpx;
      }

      .activity_icon {
        width: 35rpx;
        height: 32rpx;
      }

      .opinion_icon {
        width: 30rpx;
        height: 32rpx;
      }

      .distribution_icon {
        width: 35.6rpx;
        height: 35.6rpx;
      }

      .pageList-txt {
        display: block;
        font-size: 26rpx;
        color: #2E3C4D;
      }
    }

  }
}

.shop__code {
  width: 80vw;
  padding: 20rpx;
  overflow: hidden;

  .codeImg {
    display: block;
    width: 300rpx;
    height: 300rpx;
    margin: 50rpx auto;
  }

  .illustrate {
    display: block;
    width: 100%;
    text-align: center;
    color: #2E3C4D;
  }

}

.quit__btn {
  width: 100%;
  height: 100rpx;
  color: #5182F6;
  text-align: center;
  line-height: 100rpx;
  background: #ffffff;

}

.white__bg {
  background: #ffffff;
}

.back_bg {
  background: #F8F9F9;
  min-height: 100vh;

}
</style>
